site_8g/src/app/[locale]/(TabBar)/[[...share]]/_home/HomePromotion.tsx

"use client";
import { PromotionRep } from "@/api/home";
import Box from "@/components/Box";
import { CenterPopup } from "antd-mobile";
import { FC, useEffect, useState } from "react";

import dayjs from "dayjs";
import { Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

interface Props {
    data?: PromotionRep[];
    type?: 1 | 2; // 每天只弹一次 /  每次登录都弹
}

const HomePromotion: FC<Props> = (props) => {
    const { data, type } = props;
    const [visible, setVisible] = useState(false);

    useEffect(() => {
        const isClosePromotion = sessionStorage.getItem("isClosePromotion");
        // 如果 type 为 1  && 有isNow为true 表示已经弹出，
        const shouldShowPromotion = () => {
            // 如果不等于1而数据又是时间，清除
            if (type !== 1 && dayjs().isSame(isClosePromotion, "days")) {
                sessionStorage.removeItem("isClosePromotion");
                return true;
            }
            if (type === 1) {
                return !dayjs().isSame(isClosePromotion, "days");
            } else if (type === 2) {
                return !isClosePromotion;
            }
            return false;
        };
        let flag = shouldShowPromotion();
        setVisible(flag);
    }, []);

    const closeHandler = () => {
        setVisible(false);
        if (type === 1) {
            sessionStorage.setItem("isClosePromotion", dayjs().format("YYYY-MM-DD"));
        }

        if (type === 2) {
            sessionStorage.setItem("isClosePromotion", "true");
        }
    };

    if (data && data.length === 0) return null;
    return (
        <div>
            <CenterPopup visible={visible} onMaskClick={closeHandler}>
                <div className={"promotion-swiper relative max-w-[3.139rem]"}>
                    <div
                        onClick={closeHandler}
                        className={
                            "iconfont icon-guanbi absolute right-[0.1389rem] top-[0.0347rem]" +
                            " z-20"
                        }
                    ></div>
                    <Swiper
                        loop
                        pagination={{ clickable: true }}
                        spaceBetween={10}
                        scrollbar={{ draggable: true }}
                        modules={[Pagination]}
                        slidesPerView={1}
                        grabCursor={true}
                        navigation={true}
                        className={"min-h-[2.8472rem] rounded-[0.0694rem] bg-[#1c1c1c]"}
                    >
                        {data?.map((promotion, index) => (
                            <SwiperSlide key={index}>
                                <div className={"h-[0.2778rem] px-[0.12rem]"}>
                                    <header className={"pb-[0.0694rem] leading-[0.2778rem]"}>
                                        {promotion.content.title}
                                    </header>
                                </div>
                                <Box
                                    action={promotion.action_type}
                                    actionData={promotion.action_params}
                                >
                                    <img
                                        className={"h-[2.3rem] w-[100%] pb-[0.1111rem]"}
                                        src={promotion.content.image}
                                        alt={promotion.content.title}
                                    />
                                </Box>
                            </SwiperSlide>
                        ))}
                    </Swiper>
                </div>
            </CenterPopup>
        </div>
    );
};

export default HomePromotion;